<template>
  <div class="w-[400px] h-[400px]" id="chart-container"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted } from 'vue'

// 模拟不同时间维度的数据
const weeklyData = [
  { date: '2024-03-17', value: 100 },
  { date: '2024-03-18', value: 120 },
  { date: '2024-03-19', value: 90 }
]

const monthlyData = [
  { month: '2024-03', value: 300 },
  { month: '2024-04', value: 350 },
  { month: '2024-05', value: 400 }
]

const yearlyData = [
  { year: '2024', value: 1200 },
  { year: '2025', value: 1500 },
  { year: '2026', value: 1800 }
]

// 使用 ECharts 创建图表
onMounted(() => {
  const chart = echarts.init(document.getElementById('chart-container'))

  // 设置图表配置并展示图表
  // chart.setOption()

  const givenDate = new Date(2023, 2, 17) // 月份是从0开始计数的，所以3月对应数字2

  // 找到该周的第一天（周一）
  const firstDayOfWeek = new Date(givenDate)
  firstDayOfWeek.setDate(givenDate.getDate() - givenDate.getDay() + 1) // 将日期调整到周一

  // 计算该周的开始日期和结束日期
  const startOfWeek = new Date(firstDayOfWeek)
  const endOfWeek = new Date(firstDayOfWeek)
  endOfWeek.setDate(firstDayOfWeek.getDate() + 6) // 将日期调整到周日

  console.log('2023年3月17日所在的一周时间范围：')
  console.log('开始日期:', startOfWeek.toDateString())
  console.log('结束日期:', endOfWeek.toDateString())
})
</script>

<style scoped lang="scss"></style>
